
function bar(res, dom) {
	var myChart = echarts.init(document.getElementById(dom));
	option = {
		tooltip: {
			formatter: function (params) {
				return  res.datax[params.dataIndex] + ' : ' + res.dataxs[params.dataIndex];
			},
			textStyle: {
				fontSize: 14
			}
		},
		grid: {
			left: "12%",
			right: '4%',
			top: '15%',
			bottom: "20%"
		},
		xAxis: [{
			data: res.datax,
			axisLabel: {
				show: true,
				// rotate:-45,
				textStyle: {
					color: '#fff',
					fontSize: 18,
					lineHeight:40
				},
				margin: 10, //刻度标签与轴线之间的距离。
			},
			axisLine: {
				show: true, //不显示x轴
				lineStyle: {
					type: "solid",
					color: "#4E90F2"
				}
			},
			axisTick: {
				show: false //不显示刻度
			},
			boundaryGap: true,
			splitLine: {
				show: false,
			}
		}],
		yAxis: [{
			show: true,
			splitLine: {
				show: true,
				lineStyle:{
					color:'rgba(78, 144, 242, 0.3)',
					type:'dashed'
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					type: "solid",
					color: "#4E90F2"
				}
			},
			axisLabel: {
				textStyle: {
					color: '#fff',
					fontSize: 16			
				},
			}
		}],
		series: [
			{ //柱底圆片
				name: "",
				type: "pictorialBar",
				symbolSize: [20, 11], //调整截面形状
				symbolOffset: [0, 5],
				z: 12,
				itemStyle: {
					'normal': {
						color: '#21B5AD',
					}
				},
				data: res.dataxs
			},
			{
				type: 'bar',
				stack: '总量',
				itemStyle: {
					barBorderColor: 'rgba(0,0,0,0)',
					color: 'rgba(0,0,0,0)'
				},
				emphasis: {
					itemStyle: {
						barBorderColor: 'rgba(0,0,0,0)',
						color: 'rgba(0,0,0,0)'
					}
				},
				data: [0, 0,0,0,0,0, 0, 0]
			},
			//柱体
			{
				stack: '总量',
				type: 'bar',
				barWidth: 20,
				barGap: '0%',
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1,
							[
								{offset: 0, color: 'rgba(65, 245, 241, 0.6)'},
								{offset: 1, color: 'rgba(15, 169, 238, 0)'},
							]
						)
					}
				},
				data: res.dataxs,
				label: {
					normal: {
						show: false
					}
				},
			},		
			
			//柱顶圆片
			{
				name: "",
				type: "pictorialBar",
				symbolSize: [20, 11], //调整截面形状
				symbolOffset: [0, -7],
				z: 12,
				symbolPosition: "end",
				"itemStyle": {
					'normal': {
						color: '#14FBEF'
					}
				},
				data: res.dataxs
			},

		]
	};
	myChart.clear(option);
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}


function line(res, dom) {
	var myChart = echarts.init(document.getElementById(dom));
	var series = []
	res.datas.forEach((item, index) => {
		series.push({
			name:res.names[index],
			data: item.item,
			type: 'line',
			smooth: res.smooth,
			lineStyle: {
				color: item.color,
			},
			areaStyle: {
				color: item.acolor
			},
			symbol: res.symbol,
			itemStyle: {
				normal: {
					color: item.color
				}
			}
		})
	});
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'line' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		legend:{
			data:res.names,
			icon:'rect',
			itemHeight:7,
			itemWidth:34,
			itemGap:110,
			textStyle:{
				color:'#fff',
				padding:[0,0,0,10]
			}
		},
		color: ['#159DF3', '#4CDCF0', '#62C625'],
		grid: {
			left: '3%',
			right: '5%',
			top: '20%',
			bottom: '5%',
			containLabel: true
		},
		yAxis: [{
			type: 'value',
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(78, 144, 242, 0.26)',
					type:'dashed'
				},
			},
			axisLabel: {
				interval: 0,
				formatter:function(params){
					return params+'kg'
				},
				textStyle: {
					color: '#fff', //坐标的字体颜色
					top: 20,
					lineHeight: 20,
					fontSize: 16
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#4E90F2',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			}
		}],
		xAxis: {
			type: 'category',
			data: res.datax,			
			boundaryGap: true,
			axisLabel: {
				// interval: 0,				
				textStyle: {
					color: '#fff', //坐标的字体颜色
					lineHeight: 20,
					fontSize: 16
				}
			},
			splitLine: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#4E90F2',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			}
		},
		series: series
	};
	myChart.clear(option);
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}

function init(data){
	randerBox1(data['data1'])
	randerBox2(data['data2'])
	randerBox3(data['data3'])
	bar(data['data4'],'bar')
	line(data['data5'], 'line')
}
	
function randerBox1(data){
	$('#baojing').text(data.baojing)
	$('#qingxie').text(data.qingxie)
	$('#dianchi').text(data.dianchi)
	$('#jidianqi').text(data.jidianqi)
	$('#zaizhong').text(data.zaizhong)
}
function randerBox2(data){
	$('#infoList').html('')
	data.forEach(item=>{
		$('#infoList').append(`
			<li>
				<span class="s1">${item.id}</span>
				<span class="s2">${item.title}</span>
				<span class="s3">${item.name1}</span>
				<span class="s4">${item.name2}</span>
			</li>
		`)
	})
	var timer = setInterval(function() {
		topScroll(".scroll", 2000);
	}, 3000);
}
function randerBox3(data){
	$('#num').text(data.num)
	$('#havent').text(data.havent)
	$('#qingxiebi').text(data.qingxie)
	$('#kongzai').text(data.kongzai)
}
